<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:400px;height:100px;border:solid 1px black;margin: 50px auto;display: flex;align-items: center;text-align:center;}
        .box span{width:40px;}
        .box em{width:40px;font-style: normal;}
        .box .bar{width:280px;position: relative;}
        .bar p{margin:0;height:30px;width:0px;background: #55f;}
        .bar p i{position: absolute;left:0px;width:20px;height:50px;top:-10px;background: #00f;border-radius: 6px;cursor: pointer;}
    </style>
</head>
<body>
    <div class="box">
        <span>0%</span>
        <em>0</em>
        <div class="bar">
            <p><i></i></p>
        </div>
        <em>100</em>
    </div>
</body>
<script>
  let obox = document.querySelector('.box')
  let ospan = document.querySelector('.box span')
  let oem = document.querySelector('.box em')
  let oi = document.querySelector('.box .bar p i')
  let obar = document.querySelector('.box .bar')
  console.log(oi)

   oi.onmousedown = function(){
     oi.innerHTML=100;
   }
</script>
</html>